<template>
	<div class="container">
		<div style="position:absolute; right: 20px;">
			<a-button style="margin-left: 10px;" @click="printElement('machineaply-info-page')">打印/导出PDF</a-button>
			<a-button style="margin-left: 10px;" @click="closeTab('/machineapply')">
				<close-outlined />关闭
			</a-button>
		</div>
		<div id="machineaply-info-page">
			<!--			<h2 style="text-align: center;">机械申请计划</h2>-->
			<a-form ref="formRef" :model="formState">
				<a-descriptions title="机械申请计划" bordered size="middle">
					<a-descriptions-item label="项目名称">{{ formState.project?.name }}</a-descriptions-item>
					<a-descriptions-item label="预约申请单号">{{ formState.code }}</a-descriptions-item>
					<a-descriptions-item label="现场联系人">{{ formState.receiver }}</a-descriptions-item>
					<a-descriptions-item label="联系人电话">{{ formState.receiver_tel }}</a-descriptions-item>
					<a-descriptions-item label="送达日期">{{ formState.deliver_time }}</a-descriptions-item>
					<a-descriptions-item label="送达地址">{{ formState.deliver_address }}</a-descriptions-item>
				</a-descriptions>
				<a-row :gutter="20">
					<a-col :span="24">
						<h3 style="margin: 10px 0;"><b>本次采购物资清单</b></h3>
						<a-table :data-source="formState.materials" :columns="planMaterialColumns" :pagination="false" :row-key="(record) => record.key">
						</a-table>
					</a-col>
					<a-col :span="24" style="margin-top: 24px;">
						<a-form-item label="备注" name="memo">
							{{ formState.memo }}
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
			<h2 style="margin: 12px;">申请的发起申请人</h2>
			<a-workflow v-if="formState.id" v-model:status="formState.workflow_status" module="machineapply" :target-id="formState.id" :project-id="formState.project_id" :code="formState.code" :user-id="formState.apply_id" :extra="true" :steps="true" @submit="(e) => console.log(e)"></a-workflow>
		</div>
		<a-row :gutter="20">
			<a-col :span="24" class="py-4 text-center">
				<a-space>

					<a-button @click="closeTab('/machineapply')">
						<close-outlined />关闭
					</a-button>
				</a-space>
			</a-col>
		</a-row>
	</div>
</template>

<script setup>
import { ref, computed, onMounted, inject } from "vue";
import { CloseOutlined } from "@ant-design/icons-vue";
import { post } from "../utils";
import { useRoute } from "vue-router";
import dayjs from 'dayjs'
import { add, subtract } from "@/utils/operation.js";
import { printElement } from '../utils/exportData.js';
import { AWorkflow } from "@/components/index.js";
const route = useRoute();
const id = computed(() => {
	return route.params.id || 0;
});
const formState = ref({ materials: [] });
const formRef = ref();
const planMaterialColumns = [
	// {
	// 	title: "ID",
	// 	dataIndex: "id",
	// 	width: 60,
	// 	align: "center"
	// },
	{
		title: "机械名称",
		dataIndex: "name",
		ellipsis: true
	},
	{
		title: "规格型号",
		dataIndex: "model",
		align: "center"
	},
	{
		title: "计量单位",
		dataIndex: "unit",
		align: "center"
	},
	{
		title: "数量",
		dataIndex: "quantity",
		align: "center"
	},
	{
		title: "物资数量余量",
		dataIndex: "contractQuantity",
		align: "center"
	},
	{
		title: "使用时长",
		dataIndex: "use_time",
		align: "center"
	},
	{
		title: "时长余量",
		dataIndex: "contractUseTime",
		align: "center"
	},
	// {
	// 	title: "时长单位",
	// 	dataIndex: "time_unit",
	// 	align: "center"
	// },
	{
		title: "工作内容",
		dataIndex: "useFor",
		align: "center"
	},
	{
		title: "使用时间",
		dataIndex: "use_date",
		align: "center"
	},
	{
		title: "备注",
		dataIndex: "memo",
		align: "center"
	}
];


onMounted(() => {
	if (id.value) {
		post("machineapply/info", { id: id.value }).then(async data => {
			const contractList = await post("contract/all", { project_id: data.project_id, types: "3" });
			const supplyOrderMaterialInfos = await post(`supplyOrder/materials`, {
				contract_ids: JSON.stringify(contractList.map(item => item.id)),
				material_ids: JSON.stringify(data.materials.map(item => item.id)),
			});
			const supplyOrderMaterialInfos2MaterialId = supplyOrderMaterialInfos.reduce((target, item) => {
				if (!target[item.material.id]) {
					target[item.material.id] = {
						ys_quantity: 0,
						use_time: 0,
					};
				}
				target[item.material.id].ys_quantity = add([target[item.material.id].ys_quantity, item.ys_quantity || 0]);
				target[item.material.id].use_time = add([target[item.material.id].use_time, item.use_time || 0]);
				return target;
			}, {});
			const contractMaterialInfos2MaterialId = contractList.reduce((target, item) => {
				for (const material of item.materials) {
					if (!target[material.id]) {
						target[material.id] = {
							quantity: 0,
							use_time: 0,
						};
					}
					target[material.id].quantity = add([target[material.id].quantity, material.ContractMaterial?.quantity || 0]);
					target[material.id].use_time = add([parseFloat(target[material.id].use_time), parseFloat(material.ContractMaterial?.use_time) || 0]);
				}
				return target;
			}, {});
			data.materials = data.materials.map(item => {
				const { quantity, unit, memo, time_unit, use_time, useFor, use_date } = item.MachineapplyMaterial;
				let useTime = 0;
				if (supplyOrderMaterialInfos2MaterialId[item.id]?.ys_quantity) {
					useTime = supplyOrderMaterialInfos2MaterialId[item.id]?.use_time;
				}
				const contractQuantity = contractMaterialInfos2MaterialId[item.id]?.quantity;
				const contractUseTime = subtract([contractMaterialInfos2MaterialId[item.id]?.use_time, useTime]);
				return {
					...item,
					quantity, 
					unit, 
					memo, 
					time_unit, 
					use_time, 
					useFor,
					use_date: use_date ? dayjs(use_date).format("YYYY-MM-DD HH:mm:ss") : '',
					contractQuantity,
					contractUseTime
				}
			})
			formState.value = data;
		});
	}
});


const closeTab = inject("closeTab");
</script>

<style scoped lang="scss">
.container {
	background: #fff;
	padding: 20px;
}
:deep(.ant-descriptions-title) {
  text-align: center;
}
</style>
